/* @flow */
'use strict';

var React = require('react-native');

var {
	StyleSheet,
	View,
	Text,
	AlertIOS
} = React;
var NativeComponent = require('react-native').NativeModules.NativeComponent;

//在JS中这样订阅事件
var {
	NativeAppEventEmitter
} = require('react-native');

var subscription = NativeAppEventEmitter.addListener(
	'aMethod', (reminder) => console.log('接受到从原生组件发送过来的事件' + reminder.name + reminder.age)
);


var NativeUI = React.createClass({

	clickAction: function() {
		/*
			注意: Javascript方法名

			导出到Javascript的方法名是Objective-C的方法名的第一个部分。
			React Native还定义了一个RCT_REMAP_METHOD()宏，
			它可以指定Javascript方法名。当许多方法的第一部分相同的时候用它来避免在Javascript端的名字冲突。
			桥接到Javascript的方法返回值类型必须是void。React Native的桥接操作是异步的，
			所以要返回结果给Javascript，你必须通过回调或者触发事件来进行。
		*/
		//NativeComponent.addEvent('出去玩', '周六在成都');

		NativeComponent.addMoreEvent('出去玩', '周六在成都', {
			name: 'Tim',
			Time: '2016 - 05 - 10'
		});
	},

	getValue: function() {
		console.log(NativeComponent.firstDayOfTheWeek);
	},

	textCallBack: function() {
		/*
			RCTResponseSenderBlock只接受一个参数——传递给JavaScript回调函数的参数数组。
			在上面这个例子里我们用Node.js的常用习惯：第一个参数是一个错误对象（没有发生错误的时候为null），
			而剩下的部分是函数的返回值。

		*/
		NativeComponent.callBackEvent((error, event) => {
			if (error) {
				console.error(error);
			} else {
				AlertIOS.alert(
					'消息',
					'回调函数传递回来的数据' + event, [{
						text: '确定',
						onPress: () => console.log('Foo Pressed!')
					}, {
						text: '取消',
						onPress: () => console.log('Bar Pressed!')
					}, ]
				);
			}

		});
	},

	componentWillUnmount: function() {
		subscription.remove();
	},

	render: function() {
		return (
			<View style={styles.contentStyle}>
				<Text style={styles.textStyle}
					  onPress={this.clickAction}>点此调用原生模块</Text>
				<Text style={styles.textStyle}
					  onPress={this.getValue}>访问从原生组件注册的常量</Text>
				<Text style={styles.textStyle}
					  onPress={this.textCallBack}>测试回调函数</Text>
			</View>
		);
	}
});


var styles = StyleSheet.create({
	contentStyle: {
		flex: 1,
		marginTop: 64,
		alignItems: 'center'
	},
	textStyle: {
		fontSize: 30,
		backgroundColor: '#D8E8FB',
		padding: 20
	}
});


module.exports = NativeUI;